<template>
  <div class="filter">
    <t-drawer
      size="695px"
      :visible.sync="visible"
      :closeBtn="false"
      @confirm="handleConfirm"
      :close-on-overlay-click="false"
    >
      <template #header>
        <div class="drawer-head" @click="close">
          <p class="chevron-left">
            <icon-font name="chevron-left" size="18px" />
          </p>
          <h3>{{header}}</h3>
        </div>
      </template>
      <t-form :data="formData" :rules="rules" ref="form" label-align="top" @submit="onSubmit">
        <t-form-item label="图片" name="thumbnail">
          <upload-img module="product" :value="formData.icon ? [{url: formData.icon}] : []" @success="handleSuccess($event, 'icon')" @remove="handleRemove($event, 'icon')"></upload-img>
        </t-form-item>
        <t-form-item label="类型" name="config_data.type">
          <t-radio-group v-model="formData.config_data.type" @change="changeType">
            <t-radio value="product">产品</t-radio>
            <t-radio value="article">图文</t-radio>
          </t-radio-group>
        </t-form-item>
        <t-form-item label="分类" name="pid">
          <t-select v-model="formData.pid" :options="classifyOptions" placeholder="请选择分类"></t-select>
        </t-form-item>
        <t-form-item label="关联" name="config_data.gid">
          <t-select v-model="formData.config_data.gid" :options="productOptions" placeholder="请选择关联" @change="changeProduct"></t-select>
        </t-form-item>
        <t-form-item label="描述" name="desc">
          <t-textarea v-model="formData.desc" placeholder="请输入描述"></t-textarea>
        </t-form-item>
        <t-form-item label="排序" name="sort">
          <t-input-number v-model="formData.sort" style="width: 220px;" placeholder="输入排序"></t-input-number>
        </t-form-item>
        <t-form-item label="状态" name="status">
          <t-radio-group v-model="formData.status" :options="statusOptions"></t-radio-group>
        </t-form-item>
      </t-form>
    </t-drawer>
  </div>
</template>

<script>
import { IconFont } from "tdesign-icons-vue";
import UploadImg from "@/components/upload-img/index.vue";
import {classifyCreateApi, classifyDetailApi, classifyEditApi, classifyListApi} from "@/api/classify";
import {productListApi} from "@/api/product";

export default {
  name: 'ClassifyAdd',
  components: {IconFont, UploadImg},
  data() {
    return {
      visible: false,
      header: '新增产品',
      formData: {
        pid: '',  // 父级
        belong_module: 'applet_classify', // 模块类型（如产品分类 product_classify，品牌 product_brand，发货说明 product_deliver，分类 product_safeguard...）
        belong_id: '', // 模块id
        title: '', // 标题
        name: '', // 名称
        sn: '', // 编号
        desc: '', // 描述
        icon: '', // 图标
        sort: 999, // 排序
        config_data: {
          type: 'product', // 类型 product 产品 article 图文
          gid: '',
          data: {},
        }, // 配置数据
        status: 1, // 状态
      },
      rules: {
        icon: [{ required: true, message: '请上传图片', trigger: 'change' }],
        pid: [{required: true, message: '请选择所属分类', trigger: 'change'},],
        'config_data.gid': [{required: true, message: '请选择关联', trigger: 'change'},],
        sort: [{required: true, message: '请输入排序', trigger: 'blur'},],
        status: [{required: true, message: '请选择状态', trigger: 'change'},],
      },
      classifyOptions: [
        //{ label: '顶级分类', value: 0 },
      ],
      statusOptions: [
        {label: '启用', value: 1},
        {label: '禁用', value: 0},
        {label: '作废', value: -1},
      ],
      seriesOptions: [], // 产品系列
      productOptions: [], // 产品列表
    }
  },
  methods: {
    // 切换类型
    changeType(value) {
      console.log('value', value)
    },
    handleSuccess(files, key) {
      this.formData[key] = files.response.url
    },
    handleRemove(files, key) {
      this.formData[key] = ''
    },
    // 确认
    handleConfirm() {
      this.$refs.form.submit()
    },
    onSubmit({ validateResult, firstError }) {
      if (validateResult === true) {
        this.handleSubmit()
      } else {
        this.$message.error(firstError);
      }
    },
    handleSubmit() {
      const request = this.type === 'edit' ? classifyEditApi : classifyCreateApi
      const formData = {...this.formData}
      formData.config_data = JSON.stringify(formData.config_data)
      request(formData).then(res=> {
        this.$message.success(this.type === 'edit' ? '编辑成功' : '新增成功')
        this.close()
        this.$emit('refresh')
      }).catch(err=> {
        console.log(err)
      })
    },
    // 切换产品
    changeProduct(value, context) {
      const { option } = context
      this.formData.title = option.title
      this.formData.config_data.gid = option.gid
      this.formData.config_data.data = option
    },
    getProductList() {
      const params = {
        page: 1,  // 当前页
        limit: 9999,  // 每页条数
        is_del: '', // 是否删除（1回收站；0正常）
        classify_id: this.formData.config_data.series_id, // 分类
        brand_id: '', // 品牌
        hot_level: '',  // 推荐等级（5~1）
        key: '',  // 关键字
        status: '', // 状态
      }
      productListApi(params).then(res => {
        this.productOptions = res.data.map(item=> {
          return {
            ...item,
            label: item.title,
            value: item.gid,
          }
        })
      }).catch(err => {
      }).finally(() => {
        this.loading = false
      })
    },
    buildHierarchyRecursive2(data, pid = 0) {
      return data
        .filter(item => item.pid === pid)
        .map(item => ({
          ...item,
          children: this.buildHierarchyRecursive2(data, item.id)
        }));
    },
    getDetail() {
      classifyDetailApi({id: this.editId}).then(res=> {
        const { data } = res
        this.formData = {
          pid: data.pid,  // 父级
          belong_module: data.belong_module, // 模块类型（如产品分类 product_classify，分类 product_brand，发货说明 product_deliver，保障说明 product_safeguard...）
          belong_id: data.belong_id, // 模块id
          title: data.title, // 标题
          name: data.name, // 名称
          sn: data.sn, // 编号
          desc: data.desc, // 描述
          icon: data.icon, // 图标
          sort: data.sort, // 排序
          config_data: data.config_data ? JSON.parse(data.config_data) : {
            type: 'product', // 类型 product 产品 article 图文
            gid: '',
            data: {},
          }, // 配置数据
          status: data.status, // 状态
        }
        if (this.type === 'edit') {
          this.formData.id = data.id
          this.header = '编辑产品'
        }
      }).catch(err=> {
        console.log('err', err)
      })
    },
    // 获取列表
    getList() {
      const params = {
        page: 1,  // 当前页
        limit: 99999,  // 每页条数
        belong_module: 'applet_classify', // 模块类型（如产品分类 product_classify，说明 product_brand，发货说明 product_deliver，保障说明 product_safeguard ...）
      }
      classifyListApi(params).then(res=> {
        const lists = res.data.map(item=> ({ label: item.title, value: item.id, id: item.id, pid: item.pid }))
        const hierarchy = this.buildHierarchyRecursive(lists)
        this.classifyOptions = hierarchy
      }).catch(err=> {
        console.log('err', err)
      })
    },
    buildHierarchyRecursive(data, pid = 0) {
      return data
        .filter(item => item.pid === pid)
        .map(item => ({
          ...item,
          //children: this.buildHierarchyRecursive(data, item.id)
        }));
    },
    open(type, data={}) {
      this.editId = data.id
      this.type = type
      this.header = '新增产品'
      if (this.type === 'add') {
        this.formData = {
          pid: '',  // 父级
          belong_module: 'applet_classify', // 模块类型（如产品分类 product_classify，品牌 product_brand，发货说明 product_deliver，分类 product_safeguard...）
          belong_id: '', // 模块id
          title: '', // 标题
          name: '', // 名称
          sn: '', // 编号
          desc: '', // 描述
          icon: '', // 图标
          sort: 999, // 排序
          config_data: {
            type: 'product', // 类型 product 产品 article 图文
            gid: '',
            data: {},
          }, // 配置数据
          status: 1, // 状态
        }
      } else if (this.type === 'edit' || this.type === 'copy') {
        this.getDetail();
      }
      this.getList();
      // 获取产品系列
      //this.getSeriesList();
      this.getProductList()
      this.visible = true
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>

</style>
